<template>
  <div id="">
    <headerbox :headerTitle="'我的服务'" :hasBack='true'></headerbox>

    <ul class="serviceTab">
      <li v-for="(elem,index) in serviceTab" :key="elem.key" @click="setChoose(index)">
        <img :src="elem.icon" alt="">
        <p>{{elem.txt}}</p>
      </li>
    </ul>
    <tabNav :tabArr="tabArr" @tabEvent="tabNavEvent" class="bgWhite"></tabNav>

    <div class="" v-if="tabIdx==0"><!-- 未完成 -->
      <noneList v-if="skillList.length==0"></noneList>
      <div class="bgWhite mb10" v-else v-for="skillItem in skillList" :key="skillItem.key">
        <serviceItem :skillItem="skillItem"></serviceItem>
        <div class="" align="right" v-if="skillItem.state==0"><!-- 待接单 -->
          <button type="button" name="button" class="inlineButton mb10 mr10" @click="cancleOrder(skillItem.id)">取消订单</button>
          <button type="button" name="button" class="inlineButton mb10 mr10" @click="agreeOrder(skillItem.id)">同意预约</button>
        </div>
        <div class="" align="right" v-if="skillItem.state==1"><!-- 待付款 -->
          <button type="button" name="button" class="inlineButton mb10 mr10">等待付款</button>
        </div>
        <div class="" align="right" v-if="skillItem.state==2"><!-- 进行中 -->
          <div class="" v-if="skillItem.cancel">
            <!-- cancel.state:0等待；1同意；2拒绝 -->
            <div class="" v-if="skillItem.cancel.state==0">
              <button type="button" name="button" class="inlineButton mb10 mr10" @click="agreeCancel(skillItem.id)">同意取消</button>
              <button type="button" name="button" class="inlineButton mb10 mr10" @click="operCancel(skillItem.id)">拒绝取消</button>
            </div>
            <div class="" v-if="skillItem.cancel.state==1">
              <button type="button" name="button" class="inlineButton mb10 mr10">已同意取消</button>
            </div>
            <div class="" v-if="skillItem.cancel.state==2">
              <button type="button" name="button" class="inlineButton mb10 mr10">取消审核中</button>
            </div>
          </div>
          <button type="button" name="button" class="inlineButton mb10 mr10" v-else>进行中</button>
        </div>
      </div>
    </div>
    <div class="" v-if="tabIdx==1"><!-- 已完成 -->
      <noneList v-if="skillList.length==0"></noneList>
      <div class="bgWhite mb10" v-else v-for="skillItem in skillList" :key="skillItem.key">
        <serviceItem :skillItem="skillItem"></serviceItem>
        <div class="" align="right">
          <button type="button" name="button" class="inlineButton mb10 mr10">已完成</button>
        </div>
      </div>
    </div>
    <div class="" v-if="tabIdx==2"><!-- 已取消 -->
      <noneList v-if="skillList.length==0"></noneList>
      <div class="bgWhite mb10" v-else v-for="skillItem in skillList" :key="skillItem.key">
        <serviceItem :skillItem="skillItem"></serviceItem>
        <div class="" align="right">
          <button type="button" name="button" class="inlineButton mb10 mr10">已取消</button>
        </div>
      </div>
    </div>

    <router-view class="childrenPage"></router-view>
  </div>
</template>
<script>
import {toChildrenPage} from '@/utils/util.js';
import {checkUserAuth,skillList,orderListActive,orderReceipt,orderCancleOper,orderCancle} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    tabArr:['未完成','已完成','已取消'],
    serviceTab:[{
      icon:require('@/assets/serviceImage/ladderplayer_icon1.png'),
      txt:'陪练',
    },{
      icon:require('@/assets/serviceImage/coach_icon1.png'),
      txt:'教练',
    },{
      icon:require('@/assets/serviceImage/partner_icon1.png'),
      txt:'圈友',
    }],
    idx:0,
    isCheckAuth:0,    //身份认证状态 0 未提交 认证材料 1已提交 待审核 2 审核通过  3 审核不通过
    skillList:[],
    token:'',
    orderListJson: {
      token:'',
      page_type:1,   //我预约的 page_type =0;预约我的 page_type =1
      orderType:1,   //订单类型 预约我的 page_type =1 时传 orderType（0：需求订单 1：技能订单）
      page_status:2, //1：已完成 2:未完成 3：已取消 （不传或传0 显示全部）
    },
    tabIdx:0,
  }),
  components: {
    tabNav:()=>import('../template/tabNav'),
    serviceItem:()=>import('./myServiceItem'),
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    ...mapMutations([
      'setSkillType',
    ]),
    // 检查用户是否认证
    checkUser() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      checkUserAuth({token:xlyd_loginInfo.token}).then(res=>{
        console.log(res);
        if(res) {
          // 0 未提交 认证材料 1已提交 待审核 2 审核通过  3 审核不通过
          self.isCheckAuth = res.data.result;   //返回认证结果 1
        }
      })
    },
    // 跳转对应技能类型
    setChoose(index) {
      this.idx = index;
      let skilltype = 0;     //技能类型 0:陪练 1 圈友 2 教练
      switch (index) {
        case 0:
          skilltype = 0
          break;
        case 1:
          skilltype = 2
          break;
        case 2:
          skilltype = 1
          break;
        default:
          break;
      }
      this.setSkillType(skilltype);
      if(index==1) {    //教练类型需要认证身份
        switch (this.isCheckAuth) {
          case 0:
            this.messageBox.confirm('您还未认证，请先进行身份认证').then(action=>{
              this.$router.push({name:'authentication'});
            }).catch(error=>{
              console.log(error);
            })
            break;
          case 1:
            this.messageBox.alert('身份正在审核认证，请耐心等待');
            break;
          case 2:
            toChildrenPage(this,'myServiceType');
            break;
          case 3:
            this.messageBox.confirm('您还申请的身份认证未通过，请先重新提交认证').then(action=>{
              this.$router.push({name:'authentication'});
            }).catch(error=>{
              console.log(error);
            })
            break;
          default:
            break;
        }
      }else{
        toChildrenPage(this,'myServiceType');
      }

    },
    // 我的技能服务订单列表
    getOrderList() {
      let self = this;
      let orderListParam = self.orderListJson;
      orderListActive(orderListParam).then(res=>{
        console.log(res);
        if(res) {
          self.skillList = res.data.result;
        }
      })
    },
    // 同意预约
    agreeOrder(orderId) {
      let self = this;
      let orderParam = {
        token:self.token,
        orderId:orderId
      }
      self.messageBox.confirm('同意本次预约？').then(action=>{
        orderReceipt(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    },
    // 取消预约（订单）
    cancleOrder(orderId) {
      let self = this;
      let orderParam = {
        token:self.token,
        orderId:orderId,
      }
      self.messageBox.confirm('取消本次预约？').then(action=>{
        orderCancle(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    },
    // 同意取消
    agreeCancel(orderId) {
      let self = this;
      let cancelParam = {
        token:self.token,
        orderId:orderId,
        oper:0,     //0：同意  1：拒绝
      }
      self.messageBox.confirm('同意本次预约的取消？').then(action=>{
        orderCancleOper(cancelParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    },
    // 拒绝取消
    operCancel(orderId) {
      let self = this;
      let cancelParam = {
        token:self.token,
        orderId:orderId,
        oper:1,     //0：同意  1：拒绝
      }
      self.messageBox.confirm('拒绝本次预约的取消？').then(action=>{
        orderCancleOper(cancelParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    },
    tabNavEvent(data) {
      console.log(data);//0:未完成 1：已完成 2：已取消
      this.tabIdx = data;
      //1：已完成 2:未完成 3：已取消 （不传或传0 显示全部）
      switch (data) {
        case 0:
          this.orderListJson.page_status = 2;
          break;
        case 1:
          this.orderListJson.page_status = 1;
          break;
        case 2:
          this.orderListJson.page_status = 3;
          break;
        default:
      }
      this.getOrderList();
    }
  },
  mounted() {
    //do something after mounting vue instance
    this.checkUser(); //身份认证
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.token = xlyd_loginInfo.token;
    this.orderListJson.token = xlyd_loginInfo.token;
    this.getOrderList();
  }
}
</script>
<style lang="scss" scoped>
.serviceTab{
  @include flex;
  background: white;
  padding: 20px 0;
  margin-bottom: 10px;
  li{
    @include flexcell;
    text-align: center;
    img{
      width: 50px;
    }
  }
}
</style>
